<template>
	<view class="" v-if="showPopup">
		<view class="mark" :style="maskClass" @click="onTap"></view>
		<view class="popup_box" :style="transClass + (full?'top:0;max-height: none;':'')">
			<view class="popup_header">
				<h4 class="popup_title" v-if="title" v-text="title"></h4>
				<text class="popup_close" @click="close"> × </text>
			</view>
			<view class="popup_content">
				<view class="popup_detail">
					<slot></slot>
				</view>
			</view>
			<view v-if="$slots.footer" class="popup_footer">
				<slot name="footer"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'popup',

		components: {

		},
		props: {
			height: {
				type: Number,
				default: 250
			},
			title: {
				type: String,
				default: '',
			},
			mark: {
				type: Boolean,
				default: true,
			},
			maskClick: {
				type: Boolean,
				default: true,
			},
			full: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				duration: 300,
				showPopup: false,
				maskClass: "",
				transClass: "",
				timer: null
			}
		},
		methods: {
			open() {
				this.showPopup = true
				this.$nextTick(() => {
					clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						this.maskClass = "position: fixed;bottom: 0;top: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.4);"
						this.transClass = "transform: translateY(0%);"
					}, 50);
				})
				this.$emit('change', {
					show: true
				})
			},
			close() {
				this.maskClass = "background-color: rgba(0, 0, 0, 0);"
				this.transClass = "transform: translateY(100%);"
				this.$nextTick(() => {
					clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						this.$emit('change', {
							show: false
						})
						this.showPopup = false
					}, 300)
				})
			},
			onTap() {
				if (!this.maskClick) return
				this.close()
			},
		},
		computed:{
			
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.mark {
		transition: all 0.3s;
		z-index: 998;
		background-color: rgba(0, 0, 0, 0)
	}

	.popup_box {
		transition: all 0.3s;
		background-color: #FFF;
		min-height: 300rpx;
		max-height: 600rpx;
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateY(100%);
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		box-sizing: border-box;
		padding-top: 120rpx;
		.popup_header{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 118rpx;
			line-height: 118rpx;
			border-bottom: 1px solid #efefef;
			.popup_title{
				text-align: center;
				font-size: 36rpx;
				color: #333;
			}
			.popup_close{
				position: absolute;
				top: 0;
				right: 0;
				height: 118rpx;
				width: 118rpx;
				line-height: 118rpx;
				text-align: center;
				color: #999;
				font-size: 50rpx;
			}
		}
		.popup_content{
			
		}
	}
</style>
